$bgColor: #060a3d;
$color: #fff;
$color1: #868aaf;
$color2: #db3baa;
$color2-dark1: darken($color2, 10%);
$color2-dark2: darken($color2, 30%);
$color3: #0025f1;

* {
  margin: 0;
  padding: 0;
}
#player {
  height: 100vh;
  background: $bgColor;
  overflow: hidden;

  .header {
    height: 110px;
    text-align: center;

    h1 {
      color: $color;
      font-size: 20px;
      padding-top: 20px;
    }
    p {
      color: $color1;
      font-size: 14px;
    }
    .balls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;

      span {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: $color2-dark2;
        margin: 0 4px;

        &.current {
          width: 8px;
          height: 8px;
          background: $color2-dark1;
        }
      }
    }
  }

  .panels {
    width: 200vw;
    height: calc(100vh - 270px);
    display: flex;
    transition: transform 0.3s;
    align-items: center;
    &.panel1 {
      transform: translateX(0vw);
    }
    &.panel2 {
      transform: translateX(-100vw);
    }
    .panel-effect {
      width: 100vw;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .effect {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40vh;
        > div {
          background-size: contain;
          position: absolute;
        }
        .effect-1 {
          background: url(../svg/effect-no-move.svg) 0 0 repeat;
          width: 70vw;
          height: 70vw;
          animation: rotate 20s infinite linear;
        }
        .effect-2 {
          background: url(../svg/effect-move1.svg) 0 0 repeat;
          width: 60vw;
          height: 60vw;
          animation: rotate 10s infinite linear reverse;
        }
        .effect-3 {
          background: url(../svg/effect-move2.svg) 0 0 repeat;
          width: 24vw;
          height: 24vw;
          animation: rotate 10s infinite linear;
        }
      }
      .lyric {
        text-align: center;
        p {
          color: $color1;
          font-size: 14px;
          margin-top: 5px;

          &.current {
            color: $color;
          }
        }
      }
    }
    .panel-lyrics {
      width: 100vw;
      height: 100%;
      line-height: 2;
      text-align: center;
      overflow: hidden;

      .container {
        transition: all 0.3s;
        transform: translateY(-187px);
        p {
          font-size: 14px;
          color: $color1;
          &.current {
            color: $color;
          }
        }
      }
    }
  }
  .footer {
    height: 160px;
    .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: 24px;
        height: 24px;
        margin: 0 25px;
      }
    }
    .bar-area {
      color: $color1;
      font-size: 12px;
      display: flex;
      padding: 0 20px;
      margin-top: 20px;
      align-items: center;

      .time-start {
        order: 1;
      }
      .time-end {
        order: 3;
      }
      .bar {
        order: 2;
        flex: 1;
        height: 4px;
        background: $color3;
        border-radius: 2px;
        margin: 0 10px;

        .progress {
          width: 30%;
          height: 100%;
          border-radius: 2px;
          background: $color2;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: -7px;
            display: block;
            width: 16px;
            height: 16px;
            background: url(../svg/progress.svg) 0 0 no-repeat;
            background-size: contain;
          }
        }
      }
    }
    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0 20px;

      svg {
        width: 28px;
        height: 28px;

        &.btn-play-pause {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
